<template>
  <div class="time-node">
    <el-form label-position="top" :rules="rules" label-width="80px" :model="formData" ref='nodeForm'>
      <el-form-item label="时间判断类型" prop="timeType">
        <el-select v-model="formData.timeType" placeholder="请选择" @change="changeTimeType">
          <el-option label="指定时间" value="specified"></el-option>
          <el-option label="重复时间" value="repeat"></el-option>
        </el-select>
      </el-form-item>
      <div v-if="formData.timeType === 'repeat'" class="flex-box">
        <el-form-item label="重复周期" prop="repeatType" class="repeat-form" :style="`width: ${formData.repeatType === 'everyWeek' ? '130px' : '100%'}`">
          <el-select v-model="formData.repeatType" placeholder="请选择" @change="changeRepeatType">
            <el-option label="每天" value="everyDay"></el-option>
            <el-option label="每周" value="everyWeek"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="formData.repeatType === 'everyWeek'" prop="week" class="repeat-type">
          <el-select v-model="formData.week" placeholder="请选择" multiple>
            <el-option label="周一" :value="1"></el-option>
            <el-option label="周二" :value="2"></el-option>
            <el-option label="周三" :value="3"></el-option>
            <el-option label="周四" :value="4"></el-option>
            <el-option label="周五" :value="5"></el-option>
            <el-option label="周六" :value="6"></el-option>
            <el-option label="周日" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item v-if="formData.timeType === 'specified'" prop="timeList" key="specifiedtimeSlot" class="timeSlot">
        <el-date-picker v-model="formData.timeList" align='right' type="datetimerange" format='yyyy-MM-dd HH:mm' value-format='yyyy-MM-dd HH:mm' range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" :append-to-body='false'></el-date-picker>
      </el-form-item>
      <el-form-item v-else prop="timeList" key="repeattimeSlot" class="timeSlot">
        <el-time-picker v-model="formData.timeList" format='HH:mm' value-format='HH:mm' is-range range-separator="-" popper-class='frequency-custom-picker-popper' start-placeholder="开始时间" end-placeholder="结束时间" placeholder="请选择" :append-to-body='false'></el-time-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { deepClone } from '@/utils/helper/jsUtil'
import TspNodeApi from '@/api/ruleNode/tspNode'
import RuleNodeBaseClass from '@/components/ruleNode/RuleNodeBaseClass'

export default {
  name: 'AdvancedLibTimeNode',
  mixins: [RuleNodeBaseClass],
  props: {
  },
  data() {
    return {
      formData: {
        timeType: '',
        repeatType: '',
        week: [],
        timeList: ['', '']
      },
      rules: {
        timeType: [{ required: true, message: ' ', trigger: 'change' }],
        repeatType: [{ required: true, message: ' ', trigger: 'change' }],
        week: [{ required: true, message: ' ', trigger: 'change' }],
        timeList: [{ required: true, validator: (rule, value, callback) => { if (value[0]) { callback() } else { callback(new Error('请选择时间')) } }, trigger: 'change' }]
      }
    }
  },
  mounted() {
  },
  methods: {
    async initValue() {
      const res = await TspNodeApi.gacTimeStamp()
      const initFormData = this.initialForm ? deepClone(this.initialForm) : {}
      initFormData.metaModelId = res.data.id
      initFormData.signalKey = res.data.key
      initFormData.startTime && (initFormData.timeList = [initFormData.startTime, initFormData.endTime])
      Object.assign(this.formData, initFormData)
    },
    changeTimeType() {
      this.formData.repeatType = ''
      this.changeRepeatType()
    },
    changeRepeatType() {
      this.formData.week = []
      this.formData.timeList = ['', '']
      this.$nextTick(() => {
        this.$refs.nodeForm.clearValidate()
      })
    },
    getFormData() {
      this.formData.startTime = this.formData.timeList[0]
      this.formData.endTime = this.formData.timeList[1]
      return deepClone(this.formData)
    },
    validateForm() {
      let isValid
      this.$refs.nodeForm.validate(valid => { isValid = valid })
      return isValid
    }
  }
}
</script>
<style lang="scss">
.time-node {
  .flex-box{
    display: flex;
    .repeat-form{
      width: 120px;
    }
    .repeat-type{
      flex: 1;
      padding-top: 35px;
      margin-left: 8px;
    }
  }
  .timeSlot{
    margin-top: -8px;
  }
  .el-icon-time{
    position: absolute;
    right: 0;
    top: 2px;
  }
}
.frequency-custom-picker-popper{
  .el-time-panel__content::before, .el-time-panel__content::after{
    margin-top: -8px;
  }
}
</style>
